<template>
	<view class="list">
		<view class="reward-item"  v-for="item in list.data"  :key="item.id">
			<view class="content">{{item.content}}</view>
			<view class="time">{{item.show_at}}</view>
			<view class="line"></view>
		</view>
	</view>
	<fixed-footer>
		<primary-btn title="扫码校验" icon-type="scan" @btnClick="verifyQrcode"></primary-btn>
	</fixed-footer>
</template>

<script>
	export default {
		data() {
			return {
				list: {
					data: [],
					page: 1,
					hasMore: false
				},
			}
		},
		onPullDownRefresh() {
			this.getList(true);
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		mounted() {
			this.getList(true);
		},
		onLoad() {

		},
		methods: {
			async getList(refresh = false) {
				if (refresh) {
					this.list.page = 1
				}
				const res = await this.$request.get('/api/raffle/verify_lists', {page: this.list.page})
				if (res.code == 200) {
					this.list.hasMore = res.data.has_more_page
					const list = res.data?.lists || []
					if (refresh) {
						this.list.data = list
					} else {
						this.list.data = this.list.data.concat(list)
					}
				}
			},
			// 扫描验证二维码
			verifyQrcode() {
				uni.scanCode({
					success: async (codeRes) => {
						const arr = codeRes.result.split('&')
						const record_no = arr[0].split('=')[1];
						const res = await this.$request.post('/api/raffle/verify', {
							record_no: record_no
						})
						if (res.code == 200) {
							uni.showToast({
								title: '验证成功',
								icon: 'success'
							})
							this.getList(true);
						}
					}
				})
			},
 		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.list {
		width: 676rpx;
		height: auto;
		overflow: hidden;
		margin: 0 auto;
		margin-top:26rpx;
		.reward-item {
			width: 676rpx;
			height: auto;
			margin: 0 auto;
			overflow: hidden;
			margin-top: 30rpx;
			.content{
				width: 676rpx;
				height: auto;
				margin: 0 auto;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #262626;
				text-align: left;
				font-style: normal;
				text-transform: none; 
			}
			.time{
				width: 210rpx;
				height: 32rpx;
				margin-left: 476rpx;
				margin-top: 8rpx;
				margin-bottom: 34rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #7B7B7B;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			.line{
				width: 638rpx;
				height: 1rpx;
				background: rgba(0,0,0,0.1);
				border-radius: 0rpx 0rpx 0rpx 0rpx;
			}
		}
	}

	.manage-member {
		padding: 24rpx 30rpx;
	}
	.u-title {
		font-weight: bold;
		font-size: 36rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		.note {
			font-size: 28rpx;
			color: #999;
			font-weight: normal;
			padding-left: 20rpx;
		}
	}
	
	.member-popup-content {
		background-color: #fff;
		border-radius: 30rpx;
		padding: 30rpx;
		width: 640rpx;
		position: relative;
		.close-ico {
			position: absolute;
			top: 20rpx;
			right: 24rpx;
		}
		
		.title {
			font-size: 32rpx;
			padding-top: 12rpx;
			padding-bottom: 12rpx;
			text-align: center;
			font-weight: 500;
		}
		
		.info-part {
			margin-top: 32rpx;
			.part-title {
				font-weight: 500;
				margin-bottom: 12rpx;
			}
			.part-item {
				padding: 8rpx 0;
				font-size: 28rpx;
				.note {
					color: #666;
				}
			}
			.extra-info {
				width: 100%;
				border: 1px solid #f0f0f0;
				border-radius: 24rpx;
				height: 300rpx;
				padding: 24rpx;
			}
		}
		
		.popup-btn {
			height: 80rpx;
			line-height: 80rpx;
			background-color: $uni-color-primary;
			color: #fff;
			font-size: 32rpx;
			font-weight: 500;
			border-radius: 40rpx;
			margin-top: 40rpx;
		}
	}
	
</style>